Produced by Araxis Merge on 2021-05-13 09:09:03 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | /Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout | _payment-options.less | 2015-12-01 19:37:34 +0000 |
| 2 | /Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout | _payment-options.less | 2015-12-01 19:37:34 +0000 |
| Description | Between Files 1 and 2 | |
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 1 | 416 |
| Changed | 0 | 0 |
| Inserted | 0 | 0 |
| Removed | 0 | 0 |
| Whitespace | Consecutive whitespace is treated as a single space |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
| Active line-pairing rules |
No regular expressions were active.
| 1 | // /** | 1 | // /** | |||
| 2 | // * Copyright © 2015 Magento. All rights reserved. | 2 | // * Copyright © 2015 Magento. All rights reserved. | |||
| 3 | // * See COPYING.txt for license details. | 3 | // * See COPYING.txt for license details. | |||
| 4 | // */ | 4 | // */ | |||
| 5 | 5 | |||||
| 6 | // | 6 | // | |||
| 7 | // Variables | 7 | // Variables | |||
| 8 | // _____________________________________________ | 8 | // _____________________________________________ | |||
| 9 | 9 | |||||
| 10 | @checkout-payment-option-title__border: @checkout-payment-method-title__border; | 10 | @checkout-payment-option-title__border: @checkout-payment-method-title__border; | |||
| 11 | @checkout-payment-option-title__color: @link__color; | 11 | @checkout-payment-option-title__color: @link__color; | |||
| 12 | @checkout-payment-option-title__padding: @checkout-payment-method-title__padding; | 12 | @checkout-payment-option-title__padding: @checkout-payment-method-title__padding; | |||
| 13 | @checkout-payment-option-title-mobile__padding: @checkout-payment-method-title-mobile__padding; | 13 | @checkout-payment-option-title-mobile__padding: @checkout-payment-method-title-mobile__padding; | |||
| 14 | 14 | |||||
| 15 | @checkout-payment-option-title-icon__font-size: 32px; | 15 | @checkout-payment-option-title-icon__font-size: 32px; | |||
| 16 | @checkout-payment-option-title-icon__line-height: 16px; | 16 | @checkout-payment-option-title-icon__line-height: 16px; | |||
| 17 | @checkout-payment-option-title-icon__margin: 0; | 17 | @checkout-payment-option-title-icon__margin: 0; | |||
| 18 | @checkout-payment-option-title-icon__color: @minicart-icons-color; | 18 | @checkout-payment-option-title-icon__color: @minicart-icons-color; | |||
| 19 | @checkout-payment-option-title-icon__hover__color: @primary__color; | 19 | @checkout-payment-option-title-icon__hover__color: @primary__color; | |||
| 20 | 20 | |||||
| 21 | @checkout-payment-option-content__padding__xl: @checkout-payment-method-content__padding__xl; | 21 | @checkout-payment-option-content__padding__xl: @checkout-payment-method-content__padding__xl; | |||
| 22 | 22 | |||||
| 23 | // | 23 | // | |||
| 24 | // Common | 24 | // Common | |||
| 25 | // _____________________________________________ | 25 | // _____________________________________________ | |||
| 26 | 26 | |||||
| 27 | & when (@media-common = true) { | 27 | & when (@media-common = true) { | |||
| 28 | .checkout-payment-method { | 28 | .checkout-payment-method { | |||
| 29 | .payment-option { | 29 | .payment-option { | |||
| 30 | &._active { | 30 | &._active { | |||
| 31 | .payment-option-title { | 31 | .payment-option-title { | |||
| 32 | .action-toggle { | 32 | .action-toggle { | |||
| 33 | &:after { | 33 | &:after { | |||
| 34 | content: @icon-up; | 34 | content: @icon-up; | |||
| 35 | } | 35 | } | |||
| 36 | } | 36 | } | |||
| 37 | } | 37 | } | |||
| 38 | } | 38 | } | |||
| 39 | &._collapsible { | 39 | &._collapsible { | |||
| 40 | .payment-option-title { | 40 | .payment-option-title { | |||
| 41 | cursor: pointer; | 41 | cursor: pointer; | |||
| 42 | } | 42 | } | |||
| 43 | .payment-option-content { | 43 | .payment-option-content { | |||
| 44 | display: none; | 44 | display: none; | |||
| 45 | } | 45 | } | |||
| 46 | } | 46 | } | |||
| 47 | } | 47 | } | |||
| 48 | 48 | |||||
| 49 | .payment-option-title { | 49 | .payment-option-title { | |||
| 50 | .lib-css(border-top, @checkout-payment-option-title__border); | 50 | .lib-css(border-top, @checkout-payment-option-title__border); | |||
| 51 | .lib-css(padding, @checkout-payment-option-title__padding 0); | 51 | .lib-css(padding, @checkout-payment-option-title__padding 0); | |||
| 52 | 52 | |||||
| 53 | .action-toggle { | 53 | .action-toggle { | |||
| 54 | .lib-css(color, @checkout-payment-option-title__color); | 54 | .lib-css(color, @checkout-payment-option-title__color); | |||
| 55 | .lib-icon-font( | 55 | .lib-icon-font( | |||
| 56 | @icon-down, | 56 | @icon-down, | |||
| 57 | @_icon-font-size: @checkout-payment-option-title-icon__font-size, | 57 | @_icon-font-size: @checkout-payment-option-title-icon__font-size, | |||
| 58 | @_icon-font-line-height: @checkout-payment-option-title-icon__line-height, | 58 | @_icon-font-line-height: @checkout-payment-option-title-icon__line-height, | |||
| 59 | @_icon-font-color: @checkout-payment-option-title-icon__color, | 59 | @_icon-font-color: @checkout-payment-option-title-icon__color, | |||
| 60 | @_icon-font-color-hover: @checkout-payment-option-title-icon__hover__color, | 60 | @_icon-font-color-hover: @checkout-payment-option-title-icon__hover__color, | |||
| 61 | @_icon-font-color-active: @checkout-payment-option-title-icon__color, | 61 | @_icon-font-color-active: @checkout-payment-option-title-icon__color, | |||
| 62 | @_icon-font-margin: @checkout-payment-option-title-icon__margin, | 62 | @_icon-font-margin: @checkout-payment-option-title-icon__margin, | |||
| 63 | @_icon-font-position: after | 63 | @_icon-font-position: after | |||
| 64 | ); | 64 | ); | |||
| 65 | 65 | |||||
| 66 | > span { | 66 | > span { | |||
| 67 | display: inline-block; | 67 | display: inline-block; | |||
| 68 | vertical-align: middle; | 68 | vertical-align: middle; | |||
| 69 | } | 69 | } | |||
| 70 | } | 70 | } | |||
| 71 | } | 71 | } | |||
| 72 | 72 | |||||
| 73 | .payment-option-content { | 73 | .payment-option-content { | |||
| 74 | .lib-css(padding, 0 0 @indent__base @checkout-payment-option-content__padding__xl); | 74 | .lib-css(padding, 0 0 @indent__base @checkout-payment-option-content__padding__xl); | |||
| 75 | } | 75 | } | |||
| 76 | 76 | |||||
| 77 | .payment-option-inner { | 77 | .payment-option-inner { | |||
| 78 | margin: 0 0 @indent__base; | 78 | margin: 0 0 @indent__base; | |||
| 79 | } | 79 | } | |||
| 80 | 80 | |||||
| 81 | .credit-card-types { | 81 | .credit-card-types { | |||
| 82 | padding: 0; | 82 | padding: 0; | |||
| 83 | .item { | 83 | .item { | |||
| 84 | display: inline-block; | 84 | display: inline-block; | |||
| 85 | list-style: none; | 85 | list-style: none; | |||
| 86 | margin: 0 @indent__xs 0 0; | 86 | margin: 0 @indent__xs 0 0; | |||
| 87 | vertical-align: top; | 87 | vertical-align: top; | |||
| 88 | &._active { | 88 | &._active { | |||
| 89 | font-weight: @font-weight__bold; | 89 | font-weight: @font-weight__bold; | |||
| 90 | img { | 90 | img { | |||
| 91 | -webkit-filter: grayscale(0%); | 91 | -webkit-filter: grayscale(0%); | |||
| 92 | filter: grayscale(0%); | 92 | filter: grayscale(0%); | |||
| 93 | filter: none; | 93 | filter: none; | |||
| 94 | } | 94 | } | |||
| 95 | } | 95 | } | |||
| 96 | &._inactive { | 96 | &._inactive { | |||
| 97 | opacity: 0.4; | 97 | opacity: 0.4; | |||
| 98 | filter: alpha(opacity=40); | 98 | filter: alpha(opacity=40); | |||
| 99 | } | 99 | } | |||
| 100 | span { | 100 | span { | |||
| 101 | display: inline-block; | 101 | display: inline-block; | |||
| 102 | padding-top: 6px; | 102 | padding-top: 6px; | |||
| 103 | vertical-align: top; | 103 | vertical-align: top; | |||
| 104 | } | 104 | } | |||
| 105 | } | 105 | } | |||
| 106 | img { | 106 | img { | |||
| 107 | -webkit-filter: grayscale(100%); // For Webkit browsers | 107 | -webkit-filter: grayscale(100%); // For Webkit browsers | |||
| 108 | -webkit-transition: all .6s ease; // Fade to color for Chrome and Safari | 108 | -webkit-transition: all .6s ease; // Fade to color for Chrome and Safari | |||
| 109 | filter: grayscale(100%); | 109 | filter: grayscale(100%); | |||
| 110 | filter: gray; // For IE 6 - 9 | 110 | filter: gray; // For IE 6 - 9 | |||
| 111 | } | 111 | } | |||
| 112 | } | 112 | } | |||
| 113 | 113 | |||||
| 114 | .ccard { | 114 | .ccard { | |||
| 115 | .legend { | 115 | .legend { | |||
| 116 | &:extend(.abs-visually-hidden all); | 116 | &:extend(.abs-visually-hidden all); | |||
| 117 | } | 117 | } | |||
| 118 | .fields { | 118 | .fields { | |||
| 119 | > .year { | 119 | > .year { | |||
| 120 | padding-left: @indent__xs; | 120 | padding-left: @indent__xs; | |||
| 121 | } | 121 | } | |||
| 122 | .select { | 122 | .select { | |||
| 123 | padding-left: @indent__xs; | 123 | padding-left: @indent__xs; | |||
| 124 | padding-right: @indent__xs; | 124 | padding-right: @indent__xs; | |||
| 125 | } | 125 | } | |||
| 126 | } | 126 | } | |||
| 127 | .month { | 127 | .month { | |||
| 128 | .select { | 128 | .select { | |||
| 129 | width: 140px; | 129 | width: 140px; | |||
| 130 | } | 130 | } | |||
| 131 | } | 131 | } | |||
| 132 | .year { | 132 | .year { | |||
| 133 | .select { | 133 | .select { | |||
| 134 | width: 80px; | 134 | width: 80px; | |||
| 135 | } | 135 | } | |||
| 136 | } | 136 | } | |||
| 137 | .number { | 137 | .number { | |||
| 138 | .input-text { | 138 | .input-text { | |||
| 139 | width: 225px; | 139 | width: 225px; | |||
| 140 | } | 140 | } | |||
| 141 | } | 141 | } | |||
| 142 | 142 | |||||
| 143 | > .field.cvv { | 143 | > .field.cvv { | |||
| 144 | > .control { | 144 | > .control { | |||
| 145 | display: inline-block; | 145 | display: inline-block; | |||
| 146 | padding-right: @indent__base; | 146 | padding-right: @indent__base; | |||
| 147 | } | 147 | } | |||
| 148 | } | 148 | } | |||
| 149 | .cvv { | 149 | .cvv { | |||
| 150 | .label { | 150 | .label { | |||
| 151 | display: block; | 151 | display: block; | |||
| 152 | } | 152 | } | |||
| 153 | .input-text { | 153 | .input-text { | |||
| 154 | width: 55px; | 154 | width: 55px; | |||
| 155 | } | 155 | } | |||
| 156 | } | 156 | } | |||
| 157 | 157 | |||||
| 158 | &.fieldset { | 158 | &.fieldset { | |||
| 159 | > .field { | 159 | > .field { | |||
| 160 | .fields.group.group-2 { | 160 | .fields.group.group-2 { | |||
| 161 | .field { | 161 | .field { | |||
| 162 | width: auto !important; | 162 | width: auto !important; | |||
| 163 | } | 163 | } | |||
| 164 | } | 164 | } | |||
| 165 | } | 165 | } | |||
| 166 | } | 166 | } | |||
| 167 | } | 167 | } | |||
| 168 | } | 168 | } | |||
| 169 | } | 169 | } | |||
| 170 | 170 | |||||
| 171 | // | 171 | // | |||
| 172 | // Mobile | 172 | // Mobile | |||
| 173 | // _____________________________________________ | 173 | // _____________________________________________ | |||
| 174 | 174 | |||||
| 175 | .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { | 175 | .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { | |||
| 176 | .checkout-payment-method { | 176 | .checkout-payment-method { | |||
| 177 | .payment-option { | 177 | .payment-option { | |||
| 178 | .lib-css(margin, 0 -(@checkout-payment-option-title-mobile__padding)); | 178 | .lib-css(margin, 0 -(@checkout-payment-option-title-mobile__padding)); | |||
| 179 | 179 | |||||
| 180 | .payment-option-title { | 180 | .payment-option-title { | |||
| 181 | .lib-css(padding, @checkout-payment-option-title-mobile__padding) | 181 | .lib-css(padding, @checkout-payment-option-title-mobile__padding) | |||
| 182 | } | 182 | } | |||
| 183 | 183 | |||||
| 184 | .payment-option-content { | 184 | .payment-option-content { | |||
| 185 | .lib-css(padding, 0 @checkout-payment-option-title-mobile__padding @indent__base); | 185 | .lib-css(padding, 0 @checkout-payment-option-title-mobile__padding @indent__base); | |||
| 186 | } | 186 | } | |||
| 187 | } | 187 | } | |||
| 188 | } | 188 | } | |||
| 189 | } | 189 | } | |||
| 190 | 190 | |||||
| 191 | // | 191 | // | |||
| 192 | // Desktop | 192 | // Desktop | |||
| 193 | // _____________________________________________ | 193 | // _____________________________________________ | |||
| 194 | 194 | |||||
| 195 | .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { | 195 | .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { | |||
| 196 | .checkout-payment-method { | 196 | .checkout-payment-method { | |||
| 197 | .payment-option-title { | 197 | .payment-option-title { | |||
| 198 | .lib-css(padding-left, @checkout-payment-option-content__padding__xl); | 198 | .lib-css(padding-left, @checkout-payment-option-content__padding__xl); | |||
| 199 | } | 199 | } | |||
| 200 | .payment-option-content { | 200 | .payment-option-content { | |||
| 201 | .payment-option-inner { | 201 | .payment-option-inner { | |||
| 202 | + .actions-toolbar { | 202 | + .actions-toolbar { | |||
| 203 | margin-left: 0; | 203 | margin-left: 0; | |||
| 204 | } | 204 | } | |||
| 205 | } | 205 | } | |||
| 206 | } | 206 | } | |||
| 207 | } | 207 | } | |||
| 208 | } | 208 | } |
Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.